<template>
	<view :style="{'--color': color, '--total-height': totalHeight + 'px', '--semi-color': semiColor}">
		<view class="catePage d-flex f-column">
			<view class="topArea">
				<view :style="{height: System.statusBarHeight + 'px'}"></view>
				<view class="d-flex a-center p-left30" :style="{height: navHeight + 'px'}">
					<text class="iconfont icon-xiangzuo size36 m-right30" @click="back()"></text>
					<view class="search bgwhite d-flex a-center">
						<text class="iconfont icon-btn_search size40 color_99"></text>
						<input class="flex-1 size26" v-model="name" confirm-type="search" placeholder="输入关键字搜索" @confirm="sortClassGoods()" />
					</view>
				</view>
				<view class="p-re">
					<scroll-view class="scroll-row" scroll-x>
						<view class="d-inline-block text-center m-right40" @click="classifyChk(item.classify_id, index, item)" v-for="(item,index) in onceLevel" :key="index">
							<image class="img bgwhite bor_radius m-bot6" :src="$imgUrls(item.classify_img || logo)" mode="aspectFill"></image>
							<view class="size26" :class="{'thmeColor': current == index}">{{ item.classify_name }}</view>
						</view>
					</scroll-view>
					<view class="unfold text-center p-ab" @click="showAll = true">
						<view class="txt size26 t-letter10">展开</view>
						<text class="iconfont icon-xiangxia size28"></text>
					</view>
				</view>
				<view class="d-flex j-se">
					<view class="size30" :class="{'thmeColor': !type}" @click="navClick('')">综合推荐</view>
					<view class="d-flex" @click="navClick(2)">
						<view class="size30 m-right20" :class="{'thmeColor': type == 2}">销量筛选</view>
						<view>
							<view class="iconfont icon-xiangshang h7 color_99" :class="{'thmeColor': type == 2 && state == 1}"></view>
							<view class="iconfont icon-xiangxia h7 color_99" :class="{'thmeColor': type == 2 && state == 2}"></view>
						</view>
					</view>
					<view class="d-flex" @click="navClick(1)">
						<view class="size30 m-right20" :class="{'thmeColor': type == 1}">价格筛选</view>
						<view>
							<view class="iconfont icon-xiangshang h7 color_99" :class="{'thmeColor': type == 1 && state == 1}"></view>
							<view class="iconfont icon-xiangxia h7 color_99" :class="{'thmeColor': type == 1 && state == 2}"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="main flex-1 d-flex">
				<view class="Left" v-if="structure[current]">
					<view class="item ellipsis" :class="{'active': classifyId == item.id}" v-for="(item,index) in structure[current].list" :key="index"
						@click="classifyChk(item.id, current, item)">{{ item.name }}</view>
				</view>
				<scroll-view class="Right flex-1 bgwhite" scroll-y @scrolltolower="scrolltolowerList">
					<image class="bor_radius_16 m-bot20" :src="$imgUrls(classObj.classify_atlas)" mode="widthFix" v-if="classObj.classify_atlas"></image>
					<view class="title bor_radius_16 size26">{{ classObj.classify_name }}</view>
					<!-- 商品列表 -->
					<view class="item d-flex" @click="toGoods(item.goods_id)" v-for="(item,index) in pageList" :key="index">
						<image class="goodsImg bor_radius_20" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
						<view class="flex-1 m-left12">
							<view class="size28 bold ellipsis_2 m-bot20">{{ item.name }}</view>
							<view class="h6 color_66 ellipsis_2 m-bot20">{{ item.info }}</view>
							<view class="d-flex a-center">
								<view class="flex-1 size32 color_E9">￥{{ item.price }}</view>
								<view class="test size24 white m-right20" @click.stop="openPop(item, 1)" v-if="item.recommend">试样</view>
								<text class="iconfont icon-gouwuche size36 color_E9" @click.stop="openPop(item, 2)"></text>
							</view>
						</view>
					</view>
					
					<empty cat='4' v-if="noData" msg='还没有相关商品哦~'></empty>
				</scroll-view>
			</view>
		</view>
		
		<u-popup :show="showAll" :round="10" mode="top" @close="showAll = false">
			<view class="topPop">
				<view class="size32 bold">全部分类</view>
				<view class="m-bot40">
					<view class="item d-inline-block text-center" @click="classifyChk(item.classify_id, index, item)" v-for="(item,index) in onceLevel" :key="index">
						<image class="img bgwhite bor_radius m-bot6" :src="$imgUrls(item.classify_img || logo)" mode="aspectFill"></image>
						<view class="size26" :class="{'thmeColor': current == index}">{{ item.classify_name }}</view>
					</view>
				</view>
				<view class="text-center" @click="showAll = false">
					<text class="size28 color_99 m-right10">收起</text>
					<text class="iconfont icon-xiangshang size28 color_66"></text>
				</view>
			</view>
		</u-popup>
	
		<specsPopup :showPopup="showPopup" :pageData="info" @close="showPopup = false" />
		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import specsPopup from '@/components/specsPopup.vue'
	export default {
		components: {
			specsPopup
		},
		data() {
			return {
				staticUrl: this.staticUrl,
				onceLevel: [],
				structure: [],
				current: 0, // 一级分类的下标
				classifyId: '',
				classObj: '',
				pageList: [],
				page: 1,
				pageNum: 10,
				noData: false,
				noMore: false,
				name: '', // 关键字
				type: '', // 1价格、2销量
				state: 1, // 1升序、2降序
				showAll: false,
				showPopup: false,
				info: '',
				showModal: false
			}
		},
		computed: {
			...mapState(['color', 'totalHeight', 'System', 'navHeight', 'logo', 'vid']),
			semiColor() {
				return 'rgba(' + parseInt('0x' + this.color.slice(1, 3)) + ',' + parseInt('0x' + this.color.slice(3, 5)) + ','
					+ parseInt('0x' + this.color.slice(5, 7)) + ',' + 0.5 + ')' 
			}
		},
		onLoad() {
			this.topCategory()
		},
		methods: {
			topCategory() {
				this.$http.post({
					url: '/singleSaleApi/allUpList'
				}).then(res => {
					this.onceLevel = res.data || []
					this.structure = res.structure || []
					if(this.onceLevel.length) {
						this.classifyId = this.onceLevel[0].classify_id
						this.classObj = this.onceLevel[0]
					}
					this.structure.forEach(item => {
						let list = item.list || []
						item.list = [{name: '全部', id: item.classify_id, classify_atlas: item.classify_atlas, classify_name: item.classify_name}, ...list]	
					})
					this.sortClassGoods()
				})
			},
			sortClassGoods() {
				this.$showLoading('')
				this.noData = false
				this.noMore = false
				this.$http.post({
					url: '/singleSaleApi/sortClassGoods',
					data: {
						classify_id: this.classifyId,
						name: this.name,
						type: this.type,
						state: this.state,
						page: this.page,
						pageNum: this.pageNum,
						mode: 1
					}
				}).then(res => {
					this.$hideLoading()
					let result = res.data?.DataArr || []
					this.pageList = this.page == 1 ? result : this.pageList.concat(result)
					if(result.length < this.pageNum) this.noMore = true
					if(!this.pageList.length) this.noData = true
				})
			},
			classifyChk(id, index, item) {
				this.classifyId = id
				this.current = index
				this.classObj = item
				this.page = 1
				this.sortClassGoods()
				this.showAll = false
			},
			navClick(type) {
				this.type = type
				this.state = this.state == 1 ? 2 : 1
				this.page = 1
				this.sortClassGoods()
			},
			scrolltolowerList() {
				if(this.noMore) return
				this.page ++
				this.sortClassGoods()
			},
			openPop(item, type) {
				// type：1试样、2正装
				if(!this.vid) return this.showModal = true
				this.info = type == 1 ? item.recommend[0] : item
				this.showPopup = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.catePage {
		height: 100vh;
		background-color: #ececec;
	}
	.topArea {
		height: calc(var(--total-height) + 274rpx);
		background: linear-gradient(var(--semi-color), #fff);
		.search {
			width: 400rpx;
			height: 60rpx;
			border-radius: 30rpx;
			.icon-btn_search {
				margin: 0 10rpx 0 20rpx;
			}
		}
		.scroll-row {
			padding: 6rpx 100rpx 40rpx 40rpx;
			box-sizing: border-box;
		}
		.unfold {
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			.txt {
				writing-mode:vertical-lr;
			}
		}
	}
	.img {
		width: 120rpx;
		height: 120rpx;
	}
	.main {
		min-height: 0;
		.Left {
			width: 188rpx;
			overflow-y: auto;
			.item {
				line-height: 70rpx;
				padding-left: 30rpx;
				font-size: 26rpx;
				&.active {
					background: #fff;
					color: var(--color);
					border-left: 6rpx solid var(--color);
					padding-left: 24rpx;
				}
			}
		}
		.Right {
			padding: 0 24rpx 0 12rpx;
			.title {
				line-height: 50rpx;
				background: #f6f6f6;
				padding-left: 20rpx;
				margin-bottom: 10rpx;
			}
			.item {
				border-bottom: 1rpx solid #f8f8f8;
				padding: 10rpx 0;
				.goodsImg {
					width: 190rpx;
					height: 190rpx;
				}
				.test {
					padding: 4rpx 12rpx;
					background: #50d546;
					border-radius: 30rpx;
				}
			}
		}
	}
	.topPop {
		background: linear-gradient(var(--semi-color), #fff);
		border-radius: 0 0 10px 10px;
		padding: var(--total-height) 25rpx 40rpx 25rpx;
		.item {
			margin: 30rpx 25rpx 0 0;
			&:nth-child(5n+5) {
				margin-right: 0;
			}
		}
	}
</style>
